<template>
  <div>
    <div id="my_svg"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      barlist: [],
    };
  },

  created() {
     
  },

  sockets: {
    dataquery(data) {
      if (data.length == 0) {
        this.$alert("查询结果未能返回，请重新输入", "消息提示", {
          confirmButtonText: "确定",
          callback: (action) => {
            this.$message({
              type: "info",
              message: `action: ${action}`,
            });
          },
        });
      } else {
        console.log("第一步前端接受到返回数据===============》");
        let temp = JSON.parse(data);
        sessionStorage.setItem("datequeryar", JSON.stringify(temp.barGraph));
        this.barlist = temp.barGraph;
        if(this.barlist){
          console.log('有数据')
          this.$nextTick(()=>{
              this.mysvg();
          })
        }else{
          alert('没数据')
        }
        // console.log('第二部赋值给数组',this.barlist)
        // this.flatSub(list);
        
      }
    },
  },

  mounted() { 
  
  },

  beforeUpdate:function(){
     console.log("数据到更新阶段");
     this.mysvg();
  },
 
  updated() {
    console.log("更新后阶段");
    this.mysvg();
  },

  watch: {
    option: {
      deep: true,
      hanlder: function (newVal, oldVal) {
        if (this.mysvg) {
          if (newVal) {
            this.mysvg.setOption(newVal, true);
          } else {
            this.mysvg.setOption(oldVal, true);
          }
        } 
      },
    },
  },
  methods: {
    mysvg() {
      let data = sessionStorage.getItem("datequeryar");
      // console.log(data);
      let tempdata = JSON.parse(data);
      let abarlist = tempdata;
      // console.log("获取柱状图数据q111111111111", abarlist);
      let dataname = [];
      let datalist = [];
      let titlename = [];
      let data1 = [];
      let data2 = [];
      let data3 = [];
      let data4 = [];
      let data5 = [];
      for (let i = 0; i < abarlist.length; i++) {
        dataname.push(abarlist[i].deviceID);
        datalist.push(abarlist[i].data);
      }

      datalist.forEach((ele, index) => {
        titlename.push(ele[index].defect);
        data1.push(ele[0].val);
        data2.push(ele[1].val);
        data3.push(ele[2].val);
        data4.push(ele[3].val);
        data5.push(ele[4].val);
      });

      let mysvg = this.$echarts.init(document.getElementById("my_svg"));
      mysvg.setOption({
        option: true,
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
          },
        },
        legend: {
          data: titlename,
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          height: 220,
          containLabel: true,
        },
        xAxis: {
          type: "category",
          data: dataname,
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            name: "BlackDot",
            type: "bar",
            stack: "9295",
            label: {
              show: true,
              position: "insideRight",
            },
            data: data1,
          },
          {
            name: "Block",
            type: "bar",
            stack: "9295",
            label: {
              show: true,
              position: "insideRight",
            },
            data: data2,
          },
          {
            name: "BrightDot",
            type: "bar",
            stack: "9295",
            label: {
              show: true,
              position: "insideRight",
            },
            data: data3,
          },
          {
            name: "Line",
            type: "bar",
            stack: "9295",
            label: {
              show: true,
              position: "insideRight",
            },
            data: data4,
          },
          {
            name: "Mura",
            type: "bar",
            stack: "9295",
            barWidth:0,
            barGap: "30%",
            barCateGoryGap:"30%",
            label: {
              show: true,
              position: "insideRight",
            },
            data: data5,
          },
        ],
      });
    },
  },

   
};
</script>

<style  scoped>
#my_svg {
  width: 99%;
  height: 300px;
}
</style>